<template>
  <!-- 删除任务 -->
  <a-modal
    centered
    width="416px"
    :open="show"
    :title="title"
    :mask-closable="false"
    :body-style="{ padding: '40px 40px 8px 40px' }"
    :ok-text="okText"
    :ok-button-props="{ type: 'default', loading: loading }"
    @ok="emits('ok')"
    @cancel="cancel"
  >
    <div class="tips">
      <span class="icon"><i class="iconfont icon-error-warning-fill"></i></span>
      {{ msg }}
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  export interface Props {
    show?: boolean
    title?: string
    msg?: string
    confirmName?: string
    okText?: string
    loading?: boolean
  }

  withDefaults(defineProps<Props>(), {
    show: false,
    title: '',
    msg: '是否取消收藏数据集A?',
    okText: '确定消息并推送',
    confirmName: '',
    loading: false
  })

  const emits = defineEmits(['ok', 'update:show'])

  const cancel = () => {
    console.log('cancel')

    emits('update:show', false)
  }
</script>

<style lang="less" scoped>
  // 删除弹窗
  .tips {
    display: flex;
    margin-bottom: 5px;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    line-height: 24px;

    .icon {
      margin-right: 10px;
      font-size: 24px;
      color: #f59700;

      i {
        font-size: 24px;
      }
    }
  }
</style>
